<template>
  <div class="transfer">
    <div class="leftTransfer marginLeft40">
      <div class="leftTransfer_title">
        <el-checkbox
          :indeterminate="state.left.isIndeterminate"
          v-model="state.left.checkAll"
          @change="leftHandleCheckAllChange"
        >
          全选
        </el-checkbox>
      </div>
      <el-scrollbar style="height: 370px">
        <el-tree
          :data="state.left.transferData"
          show-checkbox
          node-key="id"
          ref="treeRef"
          :props="state.propsData"
          @check="leftHandleCheckedCitiesChange"
          :default-expand-all="true"
        >
        </el-tree>
      </el-scrollbar>
      <el-pagination
        small
        class="pagination"
        :pager-count="5"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <div class="transferButton">
      <el-button type="primary" @click="push">></el-button>
      <el-button type="primary" @click="del">{{ "<" }}</el-button>
    </div>
    <div class="rightTransfer marginRight40">
      <div class="rightTransfer_title">
        <el-checkbox
          :indeterminate="state.right.isIndeterminate"
          v-model="state.right.checkAll"
          @change="rightHandleCheckAllChange"
          >已选
        </el-checkbox>
      </div>
      <el-row>
        <el-checkbox-group
          class="transfer_group"
          v-model="state.right.transferDataChecked"
          @change="rightHandleCheckedCitiesChange"
        >
          <el-row v-for="item in state.right.transferData">
            <el-checkbox :label="item" :key="item.id">
              {{ item.text }}
            </el-checkbox>
          </el-row>
        </el-checkbox-group>
      </el-row>
    </div>
  </div>
  <el-row class="flex mt15">
    <div class="flex-margin">
      <el-button type="primary" @click="onSubmit"> 确定</el-button>
    </div>
  </el-row>
</template>
<script lang="ts" setup>
import {
  toRefs,
  reactive,
  onMounted,
  ref,
  getCurrentInstance,
  defineExpose,
  watch,
} from "vue";
import { useStore } from "/@/store/index";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();
const { proxy } = getCurrentInstance();
const treeRef = ref();
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
});
const state = reactive({
  propsData: {
    label: "text",
  },
  left: {
    inputValue: "",
    isIndeterminate: false, //半选按钮
    checkAll: false, //是否点击全选
    transferData: [], //穿梭框左侧全部数据
    transferDataAll: [], //穿梭框左侧全部数据记录
    transferDataChecked: [], //穿梭框左侧选中数据
  },
  right: {
    inputValue: "",
    isIndeterminate: false, //半选按钮
    checkAll: false, //是否点击全选
    transferData: [], //穿梭框右侧全部数据
    transferDataAll: [], //穿梭框左侧全部数据记录
    transferDataChecked: [], //穿梭框右侧选中数据
  },
  fileList: [],
});

//点击确认按钮
const onSubmit = () => {
  //返回数据
  proxy.$emit("getTreeData", state.fileList);
};
// 左侧是否点击全选
const leftHandleCheckAllChange = (val) => {
  if (state.left.checkAll) {
    proxy.$refs.treeRef.setCheckedNodes(state.left.transferData);
    //更新全选节点
    state.left.transferDataChecked = proxy.$refs.treeRef.getCheckedNodes();
  } else {
    proxy.$refs.treeRef.setCheckedKeys([]);
    state.left.transferDataChecked = [];
  }
  state.left.isIndeterminate = false;
};
// 左侧勾选数据
const leftHandleCheckedCitiesChange = (value, row, tel) => {
  state.left.transferDataChecked = row.checkedNodes;
};
// 右侧是否点击全选
const rightHandleCheckAllChange = (val) => {
  state.right.transferDataChecked = val ? state.right.transferData : [];
  state.right.isIndeterminate = false;
};
// 右侧勾选数据
const rightHandleCheckedCitiesChange = (value) => {
  state.right.transferDataChecked = value;
};
//去重方法
const removeDuplicates = (linkManObj: any) => {
  let data = state.right.transferData.filter(function (item) {
    return item.id === linkManObj.id;
  });
  return data.length > 0 ? true : false;
};
//选中按钮
const push = () => {
  state.left.transferDataChecked.filter(function (item, index) {
    if (item.isUser == "1") {
      //去重验证
      if (!removeDuplicates(item)) {
        state.right.transferData.push(item);
      }
    }
  });
  state.fileList = state.right.transferData;
};
//删除选中
const del = () => {
  let data = [];
  for (let i = 0; i < state.right.transferData.length; i++) {
    if (
      !state.right.transferDataChecked.find(
        (item) => item.id == state.right.transferData[i].id
      )
    ) {
      data.push(state.right.transferData[i]);
    }
  }
  state.right.transferData = data;
  state.fileList = state.right.transferData;
};
//组件启动
const initShuttleBox = () => {
  state.left.transferData = props.data;
};
initShuttleBox();
defineExpose({});
</script>

<style lang="scss" scoped>
.transfer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .transferButton {
    .el-button {
      display: block;
      margin: 10px 50px;
    }
  }

  .el-checkbox {
    line-height: 30px;
  }

  .transfer_input {
    margin: 10px 15px 0 15px;
    width: 85%;

    .el-input--medium .el-input__inner {
      height: 36px;
      line-height: 36px;
      border-radius: 16px;
    }
  }

  .leftTransfer,
  .rightTransfer {
    height: 425px;
    border: 1px solid #e6ebf5;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 0 10px;

    .el-checkbox {
      display: block;
    }

    .pagination {
      position: absolute;
      bottom: -8px;
      right: 0;
    }

    .leftTransfer_title,
    .rightTransfer_title {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      background: #f5f7fa;
      margin: 0;
      padding-left: 15px;
      border-bottom: 1px solid #e6ebf5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #000000;
      padding-right: 15px;
      align-items: center;
    }
  }
}

.transfer_group {
  padding-left: 15px;
}

.marginLeft40 {
  margin-left: 70px !important;
}

.marginRight40 {
  margin-right: 70px !important;
}
</style>